
<template>
  <div class="birds-box" id="birds-box-id" ref='vantaRef'>
  </div>
</template>

<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
   mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    });
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      backgroundColor: 0xa0d2ff ,
      color1: 0x44ff,
      color2: 0x3ec1fa,
      birdSize: 3.50,
      wingSpan: 40.00,
      speedLimit: 6.00,
      separation: 47.00,
      alignment: 29.00,
      cohesion: 27.00,
      quantity: 4.00
    })

  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}


</script>

<style scoped>
.birds-box{
	width: 100%;
	height: 100%;
}
</style>

